<script lang="ts" setup>
import { ref, watchEffect } from 'vue'

const emits = defineEmits(['open', 'close'])
const status = ref(false)
const setStatus = (b?: boolean) => {
  if (b !== undefined) {
    status.value = b
  } else {
    status.value = !status.value
  }
}
const color = ref<string>('var(--xy-medium-text-color)')
const hover = ref<boolean>(false)
watchEffect(() => {
  if (status.value) {
    emits('open')
    color.value = 'var(--xy-primary-color)'
  } else {
    emits('close')
    color.value = 'var(--xy-medium-text-color)'
  }
})
watchEffect(() => {
  if (hover.value) {
    color.value = 'var(--xy-primary-color)'
  } else {
    color.value = 'var(--xy-medium-text-color)'
  }
})
defineExpose({ setStatus })
</script>

<template>
  <div
    mr-10
    class="locus-point"
    :class="{ 'locus-point--active': status }"
    @mouseover="hover = true"
    @mouseout="hover = false"
    @click="setStatus()"
  >
    轨迹时间
  </div>
</template>

<style scoped>
.locus-point {
  color: v-bind(color);
  cursor: pointer;
}
.locus-point--active {
  color: var(--xy-primary-color);
}
</style>
